05. Text Elements I

Text Elements I Heading

Text Elements I

ND001 C01 L01 03 Text Elements

The structure of an element

Text Element Structures

An HTML element is a unit of content in an HTML document that is formed using HTML tags.

The basic structure of an element is composed of 4 key items, one of which is optional.

<p class="dog-breed">Labrador Retriever</p>

  1. The opening tag is the first HTML tag used to start an element.
  2. The content is the info contained between the opening and closing tags. Only this content inside the opening and closing body tags is displayed to the screen.
  3. The closing tag is the second tag used to define the end of a single element. Closings tags have a forward slash / inside of them, always after the left angle bracket.
  4. (Optional) The attribute name and value.

Notice both tags are always surrounded by opening and closing angle brackets <>.

Note: developers use the terms "left bracket" and "opening bracket" interchangeably. SImilarly, you can use either "right bracket" or "closing bracket".

There are over 100 different types of HTML tags that each serve a specific use case.

Inline vs Block

In HTML, you’ll mainly come across 2 types of HTML elements.

Block elements are meant to structure the main parts of your page, by dividing your content in coherent blocks.

Block elements are:

  • paragraphs <p>
  • lists:
    • unordered (with bullet points) <ul>, or
    • ordered - lists (with numbers) <ol>
  • headings: from 1st level <h1> to 6th level headings - <h6>
  • articles <article>
  • sections <section>
  • long quotes <blockquote>

Inline elements are meant to differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.

Inline elements are:

  • links <a>
  • emphasized words <em>
  • important words <strong>